<template>
  <uni-popup ref="popup" type="bottom">
    <view class="popup-content">
      <view class="popup-header">
        <text class="title">个人信息</text>
        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
      </view>
      
      <view class="form-item">
        <text class="label">姓名</text>
        <input v-model="form.name" placeholder="请输入姓名" />
      </view>
      
      <view class="form-item">
        <text class="label">手机号码</text>
        <input v-model="form.phone" placeholder="请输入手机号码" />
      </view>
      
      <view class="form-item">
        <text class="label">电子邮箱</text>
        <input v-model="form.email" placeholder="请输入电子邮箱" />
      </view>
      
      <button class="submit-btn" @click="submit">保存</button>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

const popup = ref(null)
const userStore = useUserStore()

const form = ref({
  name: '',
  phone: '',
  email: ''
})

const open = () => {
  console.log('Personal popup opening...')
  popup.value?.open()
}

const close = () => {
  console.log('Personal popup closing...')
  popup.value?.close()
}

const submit = () => {
  userStore.updateUserInfo(form.value)
  close()
}

defineExpose({
  open,
  close
})
</script>

<style scoped>
.popup-content {
  padding: 20px;
  background: #fff;
  border-radius: 16px 16px 0 0;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.form-item {
  margin-bottom: 16px;
}
.label {
  display: block;
  margin-bottom: 8px;
  color: #666;
}
input {
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.submit-btn {
  margin-top: 20px;
  background: #007aff;
  color: #fff;
  padding: 12px;
  border-radius: 6px;
}
</style>
